<template>
	<!-- 文章卡片展示 -->
	<view class="card-container" @click="changeMessage">
		<!-- 基础卡片 -->
		<view class="card" v-if="item.mode === 'base'">
			<view class="card-base-img">
				<image :src="item.cover[0]?item.cover[0]:'/static/img/logo.jpeg'" mode="aspectFill"></image>
			</view>
			<view class="card-base-content">
				<view class="base-content-title">
					<text>{{item.title}}
					</text>
					<SaveLikes :item="item"></SaveLikes>
				</view>
				<view class="content-desc">
					<view class="article-type">
					{{item.classify}}
					</view>
					<view class="browse-number">
					{{item.browse_count}}浏览
					</view>
				</view>
			</view>
		</view>
		<!-- 多图卡片 -->
		<view class="card mode-column" v-if="item.mode==='column'">
					<view class="list-card-top">
						<text>{{item.title}}</text>
						<SaveLikes :item="item"></SaveLikes>
					</view>
					<view class="list-card-middle">
						<view class="image-container" v-for="(img,index) in item.cover.slice(0,3)" :key="index">
							<image
								:src="img"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="content-desc list-card-bottom">
						<view class="article-type">
							{{item.classify}}
						</view>
						<view class="browse-number">
						{{item.browse_count}}浏览
						</view>
					</view>
		
				</view>
		<!-- 大图卡片 -->
		<view class="card mode-image" v-if="item.mode==='image'">
					<view class="list-card-top">
						<view class="image-container">
							<image :src="item.cover[0]" mode="aspectFill"></image>
						</view>
					</view>
					<view class="list-card-middle">
						<text>{{item.title}}</text>
						<SaveLikes :item="item"></SaveLikes>
					</view>
					<view class="content-desc list-card-bottom">
						<view class="article-type">
							{{item.classify}}
						</view>
						<view class="browse-number">
							{{item.browse_count}}浏览
						</view>
					</view>
				</view>
	</view>
</template>

<script>
	export default {
		name:"ItemCard",
		props:{
			item:Object
		},
		data() {
			return {
				
			};
		},
		methods: {
			async changeMessage() {
				// 未登录
				await this.checkedisLogin()
				// 搜索历史
				this.$emit('saveHistory')
				// 文章详情
				const { _id, title, author, create_time, thumbs_up_count, browse_count } = this.item
      			const params = { _id, title, author, create_time, thumbs_up_count, browse_count };
      			// uni.navigateTo({url: `/pages/articleDetail/index?params=${JSON.stringify(params)}`})
				this.$Router.push({
					path:'/pages/articleDetail/index',
					query:params
				})
			}
		}
	}
</script>

<style lang="scss">
@import './css/index.scss'
</style>